<template>
	<el-breadcrumb separator="/">
		<el-breadcrumb-item :to="{ path: '/' }">确认AQI数据管理</el-breadcrumb-item>
		<el-breadcrumb-item><a href="/">确认AQI数据列表</a></el-breadcrumb-item>
	</el-breadcrumb>
	<el-form :model="queryForm" :inline="true" size="small" style="margin-top: 20px;" class="demo-form-inline">
		<el-form-item label="省区域">
			<el-select v-model="queryForm.provinceId" @change="changeProvince" style="width: 100px;">
				<el-option :label="province.provinceName" :value="province.provinceId" v-for="province in provinceArr"
					:key="province.provinceId"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="市区域">
			<el-select v-model="queryForm.cityId" style="width: 100px;">
				<el-option :label="city.cityName" :value="city.cityId" v-for="city in cityArr"
					:key="city.cityId"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="确认日期">
			<el-date-picker v-model="queryForm.afDate" type="date" style="width: 100px;" placeholder="请选择日期"
				format="YYYY/MM/DD" value-format="YYYY-MM-DD">
			</el-date-picker>
		</el-form-item>
		<el-form-item>
			<el-button type="danger" @click="clear">
				清空
			</el-button>
			<el-button type="primary" @click="query">
				查询
			</el-button>
		</el-form-item>
	</el-form>
	<el-table :data="pageVO.data" style="width: 100%" :cell-style="{padding:'4px'}">
		<el-table-column fixed prop="afId" label="编号" width="150px"></el-table-column>
		<el-table-column prop="realName" label="反馈者姓名" width="120px"></el-table-column>
		<el-table-column prop="provinceName" label="所在省" width="120px"></el-table-column>
		<el-table-column prop="cityName" label="所在市" width="120px"></el-table-column>
		<el-table-column prop="aqis" label="预估污染等级" width="120px">
			<template #default="scope">
				<p :style="{
					color:scope.row.color,
					fontSize:'14px',
					fontWeight:'700',
					textAlign:'center'
				}">{{scope.row.aqiExplain}} ({{scope.row.chineseExplain}})</p>
			</template>
		</el-table-column>
		<el-table-column prop="afDate" label="反馈日期" width="120px"></el-table-column>
		<el-table-column prop="afTime" label="反馈时间" width="120px"></el-table-column>
		<el-table-column prop="gmName" label="网格员" width="120px"></el-table-column>
		<el-table-column prop="realName" label="反馈者" width="120px"></el-table-column>
		<el-table-column label="操作" width="120px">
			<template #default="scope">
				<el-button link type="primary" style="font-size: 30px;" size="small" @click="detail(scope.row.afId)">
					<el-icon title="查看详情">
						<Tickets />
					</el-icon>
				</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
		:page-sizes="[10, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="count"
		style="margin-top: 30px;">
	</el-pagination>
</template>

<script setup>
	import {
		inject
	} from 'vue';
	import {
		useRouter
	} from 'vue-router';
	// import router from '../router';
	const router = useRouter();
	const axios = inject("axios");
	import {
		Tickets,
		Pointer,
		Edit
	} from "@element-plus/icons-vue"
	import 'element-plus/dist/locale/zh-cn.js';
	import {
		reactive,
		ref
	} from 'vue';
	const queryForm = reactive({
		provinceId: 0,
		cityId: 0,
		afDate: "",
	})
	const provinceArr = ref([]);
	const cityArr = ref([]);
	const aqiArr = ref([]);
	const pageVO = ref([]);
	const pageSize = ref(10);
	const pageCount = ref(100);
	const count = ref(1000);
	const currentPage = ref(1);


	function provinceAll() {
		let url = "/api/province/findProvinceAll";
		axios.get(url).then((r) => {
			if (r.data.ok) {
				provinceArr.value = r.data.data.province;
				cityAll(provinceArr.value[0].provinceId)
				provinceArr.value.unshift({
					provinceId: 0,
					provinceName: "--全部--"
				})
			}
		})
	}

	function changeProvince() {
		cityAll(queryForm.provinceId)
		queryForm.cityId = 0;
	}

	function cityAll(provinceId) {
		let url = "/api/province/city?provinceId=" + provinceId;
		axios.get(url).then((r) => {
			if (r.data.ok) {
				cityArr.value = r.data.data.city;
				cityArr.value.unshift({
					cityId: 0,
					cityName: "--全部--"
				})
			}
		})
	}

	function query() {
		aqiFeedback(1)
	}

	function aqiFeedback(pageNo) {
		let param = {
			provinceId: queryForm.provinceId == 0 ? null : queryForm.provinceId,
			cityId: queryForm.cityId == 0 ? null : queryForm.cityId,
			afDate: queryForm.afDate == "" ? null : queryForm.afDate,
			pageNo: pageNo,
			pageSize: pageSize.value
		};
		let url = "/api/aqi/aqiPage";
		axios.post(url, param).then((response) => {
			pageVO.value = response.data.data.aqis; // 使用 .value 更新数据
			pageCount.value = pageVO.value.pageCount;
			pageNo = pageVO.value.pageNo;
			pageSize.value = pageVO.value.pageSize;
			count.value = response.data.data.aqis.count;
		});
	}

	function clear() {
		queryForm.provinceId = 0;
		queryForm.cityId = 0;
		queryForm.afDate = "";
	}

	function handleSizeChange(newPageSize) {
		pageSize.value = newPageSize;
		currentPage.value = 1;
		aqiFeedback(currentPage.value);
	}

	function handleCurrentChange(newPage) {
		currentPage.value = newPage;
		aqiFeedback(currentPage.value);
	}

	function changeState() {
		aqiFeedback(1);
	}

	function detail(afId) {
		localStorage.setItem("afId", afId);
		router.push({
			path: "/aqiDetail",
			query: {
				afId: afId
			}
		});
	}
	provinceAll();
	aqiFeedback(1);
</script>

<style>
</style>